<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

// 1. 使用 watch 监听一个响应式数据
const count = ref(100)
// 只监听一个
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })

const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})
// 监听两个
watch([count, user], (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

// 2s后count加一
setTimeout(() => {
  count.value++
}, 2000)

// 4s后user.info.age加一
setTimeout(() => {
  user.info.age++
}, 4000)

// 3. 监听响应式对象数据的一个数据，简单类型
// watch(()=>数据, 改变后回调函数)
watch(
  () => user.info.age,
  (newValue, oldValue) => {
    console.log(newValue, oldValue)
  }
)

// 深度监听deep:true
watch(
  () => user.info,
  (newValue) => {
    console.log(newValue)
  },
  { deep: true }
)
// 新版已经不需要设置，直接对其进行监听不需要箭头函数
watch(user.info, (newValue) => {
  console.log(newValue)
})
</script>

<template>
  <div class="app-page">
    <div>{{ count }}</div>
    <button @click="count++">变</button>

    <p>姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}</p>
  </div>
</template>

<style lang="css" scoped></style>
